import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

export default function pieOption4(myChart: echarts.ECharts) {
    return {
        title: {
            text: 'Pie Chart4',
            subtext: 'Fake Data',
            left: 'center'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: [
                'rose1',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
            ]
        },
        animationDuration: 10000,
        series: [
            {
                name: 'Area Mode',
                type: 'pie',
                radius: [10, 90],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 5,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    const points = params.labelLinePoints as number[][];
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;

                    return {
                        labelLinePoints: points
                    };
                },
                top: "30",
                data: [
                    { value: 30, name: 'rose 1' },
                    { value: 28, name: 'rose 2' },
                    { value: 26, name: 'rose 3' },
                    { value: 24, name: 'rose 4' },
                    { value: 22, name: 'rose 5' },
                    { value: 20, name: 'rose 6' },
                    { value: 18, name: 'rose 7' },
                    { value: 16, name: 'rose 8' }
                ]
            }
        ]
    } as EChartsOption;

}
